<script setup lang="ts">
import { computed } from 'vue'
import MenuTree from './menuTree.vue'
import useConfig from '@/store/config'
import useNav from '@/store/nav'

const config = useConfig.setup().store
const nav = useNav.setup().store

const menus = computed(() => {
  return nav.navMenu ? nav.navMenu : []
})

const defaultActive = computed(() => {
  return nav.navTabSelete ? nav.navTabSelete : undefined
})

</script>

<template>
  <el-scrollbar class="vertical-menus-scrollbar">
    <el-menu
      class="layouts-menu-vertical"
      :collapse-transition="false"
      :default-active="defaultActive"
      :collapse="config.layout.menuCollapse"
    >
      <MenuTree :menus="menus" />
    </el-menu>
  </el-scrollbar>
</template>

<style scoped>
.vertical-menus-scrollbar {
  height: calc(100% - 50px);
}
.layouts-menu-vertical {
  border: 0;
}
</style>
